<template>
    <div class="page-content">
        <!--普通商品列表-->
        <div v-if="showType === '0'">
            <div style="background-color: #FFFFFF; padding-bottom: 2px;">
                <view style="height: 100px; display: flex; margin-bottom: 6px;"
                      v-for="(item, index) in tbStoreList" :key="index">
                    <view @click.stop.prevent="gotoStorePage(item)">
                        <image style="height: 100px; width: 100px; padding-top: 4px;"
                               :src="item.thumbnailUrl ? item.thumbnailUrl + '?imageView2/1/w/300/h/300' : '/static/default-image/store-brand.jpg'"
                               mode="aspectFill"></image>
                    </view>
                    <view style="padding: 6px 5px 5px 10px; width: 100%; height: 108px; border-bottom: 1px solid #eeeeee;"
                          @click.stop.prevent="gotoStorePage(item)">
                        <view style="line-height: 2; height: 28px;">
                            {{item.name}}
                        </view>
                        <view style="display: flex; color: #999999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                            <view style="width: 100%; height: 19px;">
                                {{item.storeLabel}}
                            </view>
                            <view style="text-align: right; width: 100px;" v-if="globalVariable.coordinate">
                                {{item.distance < 1000 ? item.distance + 'm' : (item.distance / 1000 | toFixed(1)) + 'km'}}
                            </view>
                        </view>
                        <view style="white-space: nowrap; color: #999999; overflow: hidden; text-overflow: ellipsis; line-height: 2; height: 28px;">
                            <div v-if="item.businessDays">
                                工作日：{{item.businessDays}}
                            </div>
                        </view>
                        <view style="display: flex; color: #999999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 2; height: 28px;">
                            <view style="width: 100%;">
                                <div v-if="item.businessHours">
                                    营业时间：{{item.businessHours}}
                                </div>
                            </view>
                            <view style="text-align: right; width: 80px;">
                                {{item.operatingStatusText}}
                            </view>
                        </view>
                    </view>
                </view>
            </div>

            <div style="padding-top: 10px; padding-bottom: 10px;">
                <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
            </div>
        </div>
    </div>
</template>

<script>
    import {PaginationModel} from "../dev/core/model/pagination.model";
    import {TbStoreService} from "../dev/services/tb-store.service";

    export default {
        props: {
            tbStoreListFilterParams: Object, // 当前对象
            showType: { // 将图片url赋予哪个属性
                type: String,
                default: "0"
            }
        },
        data: function () {
            return {
                tbStoreList: [],
            }
        },
        components: {},
        watch: {
            tbStoreListFilterParams: {
                deep: true, // 深度监听
                handler(newVal, oldVal) {
                    console.log("店铺参数改变，即将刷新...", newVal, oldVal)
                    this.tbStoreList = []
                    this.$forceUpdate();
                    this.$nextTick(() => {
                        this.pagination = new PaginationModel();
                        this.doInfinite();
                    });
                }
            }
        },
        created() {
            this.doInfinite();
        },
        methods: {
            gotoStorePage(item) {
                console.log(item)
                uni.navigateTo({
                    url: `/pages/common/store/index?storeId=${item.id}`
                })
            },
            doInfinite() {
                const _self = this
                new TbStoreService().findTableTbStoreList({
                    pagination: _self.pagination,
                    data: {
                        communityId: _self.globalVariable.userInfo.tbCommunity.id,
                        searchKeyword: _self.tbStoreListFilterParams.searchKeyword,
                        parentStoreClassId: _self.tbStoreListFilterParams.parentStoreClassId,
                        storeClassId: _self.tbStoreListFilterParams.storeClassId,
                        coordinate: _self.globalVariable.coordinate,
                        operatingStatus: '1',
                        status: '1',
                        deleted: 0,
                        orderBy: _self.tbStoreListFilterParams.orderBy
                    }
                }).then(result => {
                    _self.pagination.refreshPage(result)
                    _self.tbStoreList = [..._self.tbStoreList, ...result.list]
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
</style>
